<template>
  <div class="content_box" id="pdfDom">
    <div class="top">
      <h6>编号：</h6>
      <div class="centent">
        <h3>应收账款信息确认函</h3>
      </div>
      <h5 style="margin-bottom: 0.0521rem; font-weight: 400">{{ orgname }}：</h5>
      <p style="margin-bottom: 0.0521rem">
        鉴于我司拟向中国邮政储蓄银行股份有限公司办理<span style="text-decoration: underline"
          >应收账款质押融资</span
        >业务，特向贵司提交此应收账款确认申请，以确认我司向贵司或贵司关联方提供货物/服务所产生的应收账款信息。
      </p>

      <p style="margin-bottom: 0.0521rem">应收账款信息如下：</p>
      <!-- <div class="table">
        <el-table
          style="width: 100%"
          :data="userData"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            color: '#4D4D4D'
          }"
        >
          >
          <el-table-column prop="a" label="合同编号" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="b" label="合同名称" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="c" label="发票号码" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="d" label="发票代码" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="e" label="应收账款金额（元）" min-width="6%" align="center">
            <template slot-scope="scope">{{ scope.row.e | getArea }}</template>
          </el-table-column>
          <el-table-column prop="f" label="付款日期" min-width="4%" align="center">
          </el-table-column>
        </el-table>
      </div> -->
      <table id="table" v-if="userData" style="margin-top: 0.0781rem">
        <tbody id="tbody">
          <tr align="center" valign="center">
            <td scope="row">合同编号</td>
            <td scope="row">合同名称</td>
            <td scope="row">发票号码</td>
            <td scope="row">发票代码</td>
            <td scope="row" style="1.3542rem">应收账款金额（元）</td>
            <td scope="row">付款日期</td>
          </tr>
          <tr align="center">
            <td scope="row">{{ userData[0].a }}</td>
            <td scope="row">{{ userData[0].b }}</td>
            <td scope="row">{{ userData[0].c }}</td>
            <td scope="row">{{ userData[0].d }}</td>
            <td scope="row" style="1.3542rem">{{ userData[0].e | getArea }}</td>
            <td scope="row">{{ userData[0].f }}</td>
          </tr>
        </tbody>
      </table>
      <p>自贵司确认上述应收账款信息之日起，上述合同收款账户变更为如下账户：</p>
      <table id="table" v-if="userData" style="margin-top: 0.0781rem">
        <tbody id="tbody">
          <tr align="center" valign="center">
            <td scope="row">户名</td>
            <td scope="row">账号</td>
            <td scope="row">开户行</td>
          </tr>
          <tr align="center">
            <td scope="row">{{ userData[0].g }}</td>
            <td scope="row">{{ userData[0].h }}</td>
            <td scope="row">{{ userData[0].i }}</td>
          </tr>
        </tbody>
      </table>
      <p>
        若贵司认可并同意上述信息，请在应收账款确认函（回执）盖章证明，并将回执联邮寄至以下地址：
      </p>
      <p>收件地址：</p>
      <p>收件人姓名及联系方式：</p>
      <div class="right">
        <p>{{ entname }}（公章）</p>
        <div style="margin-top: 0.026rem">年<span></span>月<span></span>日</div>
      </div>
      <div class="inner-border"></div>
    </div>
    <div class="top" style="border: 0px">
      <div class="centent">
        <h3>应收账款信息确认函（回执）</h3>
      </div>
      <h5 style="margin-bottom: 0.0521rem; font-weight: 400">{{ entname }}：</h5>
      <p style="margin-bottom: 0.0521rem">
        我司已收到贵司于<span
          style="display: inline-block; width: 0.2083rem; text-indent: 0em; text-align: right"
        ></span
        >年<span
          style="display: inline-block; width: 0.1042rem; text-indent: 0em; text-align: right"
        ></span
        >月<span
          style="display: inline-block; width: 0.1042rem; text-indent: 0em; text-align: right"
        ></span
        >日签署的编号为<span
          style="display: inline-block; text-indent: 0em; text-align: right; width: 0.2604rem"
        ></span
        >的《应收账款信息确认函》，现确认同意下述内容。
      </p>
      <table id="table" v-if="userData" style="margin-top: 0.0781rem; margin-bottom: 0px">
        <tbody id="tbody">
          <tr align="center" valign="center">
            <td scope="row" colspan="6">应收账款信息</td>
          </tr>
          <tr align="center" valign="center">
            <td scope="row">合同编号</td>
            <td scope="row">合同名称</td>
            <td scope="row">发票号码</td>
            <td scope="row">发票代码</td>
            <td scope="row">应收账款金额（元）</td>
            <td scope="row" style="0.6771rem">付款日期</td>
          </tr>
          <tr align="center">
            <td scope="row">{{ userData[0].a }}</td>
            <td scope="row">{{ userData[0].b }}</td>
            <td scope="row">{{ userData[0].c }}</td>
            <td scope="row">{{ userData[0].d }}</td>
            <td scope="row">{{ userData[0].e | getArea }}</td>
            <td scope="row" style="0.6771rem">{{ userData[0].f }}</td>
          </tr>
          <!-- <tr align="center" valign="center">
            <td scope="row" colspan="6">变更收款账户信息</td>
          </tr> -->
          <!-- <tr align="center" valign="center">
            <td scope="row" colspan="2">户名</td>
            <td scope="row" colspan="2">账号</td>
            <td scope="row" colspan="2">开户行</td>
          </tr>
          <tr align="center">
            <td scope="row" colspan="2">{{ userData[0].g }}</td>
            <td scope="row" colspan="2">{{ userData[0].h }}</td>
            <td scope="row" colspan="2">{{ userData[0].i }}</td>
          </tr> -->
        </tbody>
      </table>
      <table id="table" v-if="userData" style="margin-top: 0px">
        <tbody id="tbody">
          <tr align="center" valign="center">
            <td scope="row" colspan="6" style="border-top: 0px">变更收款账户信息</td>
          </tr>
          <tr align="center" valign="center">
            <td scope="row" colspan="2">户名</td>
            <td scope="row" colspan="2">账号</td>
            <td scope="row" colspan="2">开户行</td>
          </tr>
          <tr align="center">
            <td scope="row" colspan="2">{{ userData[0].g }}</td>
            <td scope="row" colspan="2">{{ userData[0].h }}</td>
            <td scope="row" colspan="2">{{ userData[0].i }}</td>
          </tr>
        </tbody>
      </table>
      <h5 style="margin: 0.0521rem 0 0.026rem 0; text-indent: 2em">应收账款确认声明：</h5>
      <p>1、我司确认本上述应收账款对应的交易及资料真实、合法、有效；</p>
      <p>2、自本回执签署生效之日起，针对上述应收账款项下付款均以现金转账方式支付至上述收款账户。</p>
      <div class="right">
        <p>{{ orgname }}（公章）</p>
        <div style="margin-top: 0.026rem">年<span></span>月<span></span>日</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: null,
      putoutid: '',
      entname: '',
      // year: '',
      // month: '',
      // day: '',
      orgname: '', //核心企业名称
      productname: ''
    }
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      if (value <= 0) return '-'
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getYear(value) {
      if (value != '') return value
      const date = new Date()
      return date.getFullYear()
    },
    getMonth(value) {
      if (value != '') return value
      const date = new Date()
      return date.getMonth() + 1
    },
    getDay(value) {
      if (value != '') return value
      const date = new Date()
      return date.getDate()
    }
  },
  mounted() {
    this.userData = JSON.parse(localStorage.getItem('formList'))
    this.entname = sessionStorage.getItem('entname')
    this.putoutid = localStorage.getItem('putoutid')
    this.orgname = localStorage.getItem('orgname')
    this.productname = localStorage.getItem('productname')

    // const date = localStorage.getItem('inputdate')
    // this.year = date.split('-')[0] // 获取当前年份，
    // this.month = date.split('-')[1] // 获取当前月份
    // this.day = date.split('-')[2].split(' ')[0] // 获取当前日期
  }
}
</script>

<style lang="scss" scoped>
.content_box {
  box-sizing: border-box;
  padding: 0.1042rem 0.4167rem;
  padding-top: 0.5208rem;
  width: 100%;
  overflow: auto;
  .top {
    box-sizing: border-box;
    padding-bottom: 0.0052rem;
    border-bottom: 0.0052rem solid #000;
    margin-bottom: 0.1302rem;
    .inner-border {
      border-bottom: 0.0052rem solid #000;
    }
  }
  h6 {
    font-size: 0.1042rem;
    color: #777;
    font-weight: 400;
    font-family: '仿宋';
  }
  h5 {
    font-size: 0.125rem;
    color: #000;

    font-family: '仿宋';
  }
  p {
    text-indent: 2em;
    font-size: 0.125rem;
    color: #222;
    line-height: 0.2083rem;
    font-family: '仿宋';
  }
  .centent {
    width: 100%;
    text-align: center;
    margin: 0.026rem 0;
    h3 {
      font-size: 0.1563rem;
      color: #000;
      font-family: '仿宋';
    }
  }
  .right {
    margin-top: 0.2604rem;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 0.1563rem;
    div {
      display: flex;
      color: #222;
      font-family: '仿宋';
      font-size: 0.125rem;
      span {
        width: 0.2083rem;
      }
    }
  }
}

// 表格
.table {
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  overflow: auto;
  margin: 0.0521rem 0;
  display: flex;
}
// 表格
.table {
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  overflow: auto;
  margin: 0.0521rem 0;
  display: flex;
}

// 表格
thead tr th {
  font-size: 0.125rem;
  font-family: '仿宋';
  font-weight: 600;
  color: #000000;
  background: #f2f8fa;
  .th {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}

table th,
table td {
  box-sizing: border-box;
  height: 0.2188rem;
  border: 0.0052rem solid #000;
  padding: 0.026rem 0.0521rem;
  font-size: 0.0938rem;
  font-family: '仿宋';
  font-weight: 400;
  color: #000;
}
.td {
  font-family: '仿宋';
  span {
    cursor: pointer;
    margin-right: 0.099rem;
    width: 0.2969rem;
    height: 0.1094rem;
    font-size: 0.0729rem;
    font-family: '仿宋';
    font-weight: 400;
    text-decoration: underline;
    color: #3f6ef2;
  }
}
tbody tr td {
  font-family: '仿宋';
}
table {
  font-family: '仿宋';
  width: 100%;
  margin-bottom: 0.1563rem;
  border-collapse: collapse;
}
</style>
